<template lang="html">
  <div class="page-scroll-view">
    <!-- header -->
    <ui-header :left-options="{showBack: false}">{{siteInfo.hospitalName}}<a @click="goLogin" slot="right">登录</a></ui-header>
    <!-- swiper -->
    <div>
      <swiper :options="swiperOptionIn" class="swiper-position">
        <swiper-slide v-for="(item, index) in sliderImgs" :key="index">
          <img class="recommand-swiper-img" v-lazy="item.pic" />
        </swiper-slide>
        <div class="swiper-pagination-white swiper-pagination-position" slot="pagination"></div>
      </swiper>
    </div>
    <!-- menu1 -->
    <div data-flex class="bdr-b f0">
      <div class="bdr-r">
        <router-link to="meal">
          <img v-lazy="'/static/images/xixi/d_tijianyuyue.png'" class="img-top-menu"/>
        </router-link>
      </div>
      <div class="bdr-r">
        <img v-lazy="'/static/images/xixi/d_tijianbaogao.png'" class="img-top-menu"/>
      </div>
      <div>
      <img v-lazy="'/static/images/xixi/d_gerebzhongxin2.png'" class="img-top-menu"/>
      </div>
    </div>
    <!-- menu2 -->
    <div class="welcome-fast-channel">
      <div class="welcome-mod-hd">
        <i class="iconfont">&#xe670;</i>
        <span class="tit">便捷入口</span>
      </div>
      <div data-flex class="inner">
        <div data-cell="1/2" class="ali-lf tc bdr-r">
          <img v-lazy="imgs[0]" class="icon-channel-order"/>
          <p class="f32">我的订单</p>
        </div>

        <div data-cell="1/2" class="ali-rt">
          <div data-flex class="bdr-b ali-rt-item">
            <img v-lazy="imgs[1]" class="channel-icon"/>
            <p class="channel-tit" data-flex="center">我的体检卡</p>
          </div>
          <div data-flex class="ali-rt-item">
            <img v-lazy="imgs[2]" class="channel-icon"/>
            <p class="channel-tit mt20">企业通道<br><span class="c-9 f24">HR团检助手</span></p>
          </div>
        </div>
      </div>
    </div>
    <!-- activity -->
    <div>
      <div class="welcome-mod-hd">
        <i class="iconfont">&#xe673;</i>
        <span class="tit">精彩活动</span>
      </div>
      <div class="f0 bdr-t bdr-b">
        <img v-lazy="'/static/images/xixi/shiming.png'" class="img-activity"/>
      </div>
    </div>
    <ui-white-space size="sm"></ui-white-space>
    <!-- summary -->
    <div class="welcome-hospital-profile c-6 bdr-t bdr-b">
      杭州市西溪医院，又名杭州市第六人民医院、浙江中医药大学附属杭州西溪医院，是一家以诊治肝病、感染性疾病为特色的集医疗、教学、科研、预防、保健为一体的市属三级甲等公立医疗机构。医院于2012年6月从原杭州市第六人民医院（文晖路201号）整体搬迁至留下镇，并更名为杭州市西溪医院。
    </div>
    <ui-white-space size="md"></ui-white-space>
    <!-- footer -->
    <div class="welcome-footer tc">
      <p class=""><img v-lazy="'/static/images/xixi/healthlogo.png'" /></p>
      <p class="">杭州市西溪医院</p>
      <p class="mt20 mb10 weui-text-primary"><span>公立三甲医院 公立医院</span></p>
      <p class="c-9">浙江省杭州市西湖区留下镇横埠街2号</p>
      <div class="welcome-concat-btn">
        <a href="javascript:;" class="weui-btn weui-btn_plain-primary">0571-86481630</a>
      </div>
    </div>
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import imgDingdan from 'src-assets/img/dingdan.png'
import imgTijianka from 'src-assets/img/tijianka.png'
import imgTongdao from 'src-assets/img/tongdao.png'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      imgs: [imgDingdan, imgTijianka, imgTongdao],
      sliderImgs: [
        {pic: '/static/images/xixi/01_banner.png', url: ''},
        {pic: '/static/images/xixi/02_banner.png', url: ''},
        {pic: '/static/images/xixi/03_banner.png', url: ''},
      ],
      swiperOptionIn: {
        pagination: '.swiper-pagination-white',
        paginationClickable: true,
        autoplay: 3000,
      }
    }
  },
  computed: mapState({
    siteInfo: state => state.app.siteInfo
  }),
  components: {
    swiper,
    swiperSlide,
  },
  methods: {
    goLogin (e) {
      this.$router.push('login')
    }
  }
}
</script>

<style lang="less">
.swiper-pagination-bullet{
  width: 16px;
  height: 16px;
}
.swiper-pagination-position {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.ui-header-home-icon{
  font-size: 40px;
}
.welcome-hospital-profile{
  padding: 140px 30px 20px 30px;
  font-size: 24px; /*px*/
  background-color: #fff;
  background-image: url('../../../assets/img/hosintro.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 900px auto;
}
.welcome-mod-hd{
  background-color: #EFEFF4;
  height: 60px;
  line-height: 60px;
  font-size: 24px;
  padding-left: 30px;
  .iconfont{
    font-size: 34px;
    vertical-align: bottom;
  }
  .tit{
    color: #999;
  }
}
.welcome-footer{
  background-image: url('../../../assets/img/caitiao.png');
  background-repeat: repeat-x;
  padding-top: 40px;
  background-color: #fff;
}
.welcome-fast-channel{
  background-color: #fff;
  .inner{
    height: 220px;
  }
  .ali-lf{
    padding-top: 50px;
  }
  .ali-rt-item{
    height: 110px;
    padding: 0 0 0 40px;
  }
  .channel-icon{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    margin-top: 35px;
  }
  .channel-tit{
    font-size: 30px;
  }
}
.welcome-concat-btn{
  padding: 30px 40px;
}
.img-top-menu{
  height: 290px;
}
.img-activity{
  height: 190px;
}
.icon-channel-order{
  width: 70px;
  height: 70px;
}
</style>
